<template>
	<div class="dialog" :style="{ display: props.visiable ? 'block' : 'none' }">
		<div class="content">
			<h2>
				<slot name="title">{{ props.title }}</slot>
				<b @click="emits('cancelClick')">X</b>
			</h2>
			<hr>
			<div class="con">
				<slot></slot>
			</div>
			<hr>
			<div class="bottom">
				<button @click="emits('okClick')" class="ok">
					<slot name="okValue">{{ props.okValue }}</slot>
				</button>
				<button @click="emits('cancelClick')" class="cancel">
					<slot name="cancelValue">{{ props.cancelValue }}</slot>
				</button>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
// 自定义属性
const props = defineProps({
	visiable: Boolean,
	title: {
		type: String,
		default: '默认标题'
	},
	okValue: {
		type: String,
		default: '确认'
	},
	cancelValue: {
		type: String,
		default: '取消'
	}
})
// 自定义事件
const emits = defineEmits(['okClick', 'cancelClick'])

</script>

<style lang="scss" scoped>
.dialog {
	width: 100%;
	height: 100%;
	background-color: rgba($color: #000000, $alpha: .6);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;

	.content {
		padding: 20px;
		background-color: white;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		min-width: 400px;

		h2 {
			display: flex;
			justify-content: space-between;
		}

		.con {
			min-height: 200px;
		}
		hr {
				margin: 10px 0;
			}
		.bottom {
			display: flex;
			justify-content: flex-end;
			button {
				width: 120px;
				height: 36px;
				border: 0;
				outline: 0;
				color: white;
			}
			.ok {
				background-color: skyblue;
			}
			.cancel {
				background-color: tomato;
			}
			
		}
	}
}
</style>